/**
 * Created by bethinner on 5/17/16.
 */
import React, { Component } from 'react';

import { connect } from 'react-redux'
import browserHistory from 'react-router/lib/browserHistory'


export default class SpanInTagIcon extends Component{
    constructor(props){
        super(props);

    }

    componentWillMount(){

    }

    getDivStyle(){
        if (this.props.withColor){
           return orangeDivStyle;
        }else {
            return garyDivStyle;
        }
    }
    getImgSrc(){
        if (this.props.withColor){
            return '/public/img/tag_orange_icon.png';
        }else {
            return '/public/img/tag_gray_big.png';
        }
    }
    render(){
        return(
            <div style={{
            height:"60px",
            width:"60px",
            position:"absolute",
            right:"0px",
            bottom:this.props.bottom,
            zIndex:this.props.zindex
            }} >
                <div >
                    <div style={{position:"relative"}}>
                        <img src={this.getImgSrc()} width="60px" height="60px"/>
                    </div>
                    <div style={this. getDivStyle()}>{this.props.text}</div>
                </div>
            </div>

        )
    }
}
let garyDivStyle={
    position:"absolute",
    top:"8px",
    fontSize:"14px",
    width:"60px",
    height:"40px",
    lineHeight:"40px",
    textAlign:"center",
    color:"#9B9B9B",
    marginLeft:"6px"
};
let orangeDivStyle={
    position:"absolute",
    top:"8px",
    fontSize:"14px",
    width:"60px",
    height:"40px",
    lineHeight:"40px",
    textAlign:"center",
    color:"#F19D59",
    marginLeft:"6px"
};
SpanInTagIcon.defaultProps = {
    text:"",
    withColor:false,
    zindex:0,
    bottom:"0px"

}

SpanInTagIcon.propTypes = {
    text:React.PropTypes.string,
    withColor:React.PropTypes.bool,
    zindex:React.PropTypes.number,
    bottom:React.PropTypes.string
}


